<template>
    <div class="RxWheelImg">
        <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
                :duration="duration">
            <swiper-item v-for="obj in portal.items">
                <img class="rxCarouselImgBox" @click="changeImg(obj)" slot="img" :src="imageUrl(obj.fileId)"/>
            </swiper-item>
        </swiper>
    </div>
</template>

<script>
export default {
    name: "RxWheelImg",
    inject: ['portalJump'],
    data() {
        return {
            indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 500
        }
    },
    props: {
        portal: Object,
    },
    created() {
        this.indicatorDots = this.portal.items.length == 1 ? false : true
    },
    methods: {
        changeImg(type) {
            if (type.skip == "yes") {
                let url = '/pages/RxIframe/RxIframe?url=' + type.url + '&title=轮播图';
                uni.navigateTo({
                    url: url
                })
            }
        }
    }
}
</script>

<style scoped>
.RxWheelImg {
    border-radius: .5rem;
    overflow: hidden;
    width: calc(100% - 1.2rem);
    margin: 0.6rem auto;
    box-shadow: 0rem 0rem 0.2rem 0rem #dce0eb;
}


.rxCarouselImgBox{
    height: 100%;
    width: 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
</style>
